<template>
	<view class="container goodsDetail-container">
		<view class="swiper-parent">
			<swiper class="swiper" circular :autoplay="true" :interval="5000" :duration="500">
				<swiper-item v-for="(item,idx) in goodsDetail.picture" :key="'goods_pic_'+idx">
					<view class="swiper-item">
						<image class="banner-img" :src="item.url" mode="aspectFit"
							@error="$handleImageError(item,'url')"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="goods-price" v-if="goodsDetail.specification">
			<text class="new-price">¥{{getPrice(goodsDetail.specification)}}</text>
			<text>已售99+</text>
			<!-- <text class="old-price">¥200</text> -->
		</view>
		<view class="goods-name-box">
			<view class="goods-name">
				{{goodsDetail.name}}
			</view>
			<view class="goods-keyword">
				<span class="goods-key-list" v-for="(item,idx) in getKeyword(goodsDetail.keyword)" :key="item+'_'+idx">{{item}}</span>
			</view>
			<view class="goods-blurb">
				<view style="margin-right: 10rpx;">产地：{{goodsDetail.placeOfOrigin}} |</view>
				<view style="margin-right: 10rpx;">品牌：{{goodsDetail.brand}} |</view>
				<view>快递：免运费</view>
			</view>
		</view>
		

		<!-- <view class="content-list" v-if="goodsDetail.description">
			<view class="content-title">商品描述</view>
			<view class="content-info" >
				<view v-for="(item,idx) in goodsDetail.description.split('\n')" :key="'description_'+idx">
					{{item}}
				</view>
			</view>
		</view> -->

		<view class="goods-info">
			<rich-text class="myRichText" :nodes="goodsDetail.details"></rich-text>
		</view>
		<view class="page-bottom">
			<view class="ico-act">
				<view class="iconfont">&#xe644;</view>
				<view>客服</view>
			</view>
			<view class="ico-act" @click="jumpTab('/pages/shopCart/index')">
				<view class="iconfont">&#xe63f;</view>
				<view>购物车</view>
			</view>
			<view class="ico-act">
				<view class="iconfont">&#xebab;</view>
				<view>分享</view>
				<button class="share-btn-child" open-type="share"></button>
			</view>
			<view style="flex-grow: 1;"></view>
			<view class="yuan-btn btn-success-hollow" @click="showSizePanel=true;sizePanelType='addCar'">加入购物车</view>
			<view class="yuan-btn btn-success" @click="showSizePanel=true;sizePanelType='doPay'">立即购买</view>
		</view>

		<view class="other-panel" :class="showSizePanel&&'other-panel-show'">
			<view class="other-main" :class="showSizePanel&&'other-main-show'">
				<view class="other-title">
					<text>选择规格</text>
					<text class="iconfont" @click="showSizePanel=false">&#xe62c;</text>
				</view>
				<view class="size-goods">
					<image class="size-img" :src="goodsDetail.picture[0].url" mode="aspectFill"
						v-if="goodsDetail.picture"></image>
					<view>¥{{$toYuan(selSizeData.price)}}</view>
				</view>
				<view class="other-list">

					<view class="list-content">
						<view style="font-size: 24rpx;color: #999;">剩余：{{selSizeData.inventory}}</view>
					</view>
				</view>
				<view class="other-list">
					<view class="list-title">规格</view>
					<view class="list-content">
						<view class="size-list" :class="selSizeData.id===item.id&&'size-list-sel'"
							v-for="item in sizeArr" :key="'sizeList_'+item.id" @click="selSize(item)">{{item.name}}
						</view>
					</view>
				</view>
				<view class="other-list">
					<view class="list-title">数量</view>
					<view class="list-content">
						<view class="goods-numbox">
							<text class="iconfont" @click="clickMinus()">&#xe711;</text>
							<input class="goods-num" type="number" v-model="payNum" disabled>
							<text class="iconfont" @click="clickAdd()">&#xe607;</text>
						</view>
					</view>
				</view>
				<view class="other-bottom">
					<view class="yuan-btn btn-success sure-btn" @click="clickPay" v-if="sizePanelType==='doPay'">立即购买
					</view>
					<view class="yuan-btn btn-success sure-btn" @click="clickAddCar" v-else>立即加入</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from "vue";
	import api from "../../common/api";
	import { onLoad } from "@dcloudio/uni-app"
	import { getStorage, hideLoading, showLoading, showToast, toYuan, utilLogin } from "../../common/util";
	import commonStore from "../../store/commonStore";
	const showSizePanel = ref(false)
	const sizePanelType = ref('')
	let sizeArr = []
	const selSizeData = ref<any>({})
	const selSize = (item) => {
		selSizeData.value = item
	}
	const pageId = ref('')
	const shareUserId=ref('')

	onLoad((options) => {
		pageId.value = options.id;
		shareUserId.value = options.shareUserId || '';
	})
	onMounted(async () => {
		await getDetail()
		selSizeData.value = sizeArr[0]

	})
	const jump = (url) => {
		uni.navigateTo({ url })
	}
	const jumpTab = (url) => {
		uni.switchTab({ url })
	}
	const goodsDetail = ref<any>({})
	const getDetail = async () => {
		showLoading()
		try {
			const res = await api.findGoodDetail({ id: pageId.value })
			sizeArr = res.data.specification
			res.data.details = res.data.details.replace(/<img([^>]*)>/g, (match, attrs) => {
				// 保留原有属性，添加默认样式
				return `<img${attrs} style="max-width:100%;height:auto;display:block;margin:4px auto;border-radius:4px" >`;
			});
			goodsDetail.value = res.data
		} finally {
			hideLoading()
		}
	}
	const clickAddCar = async () => {
		if (!utilLogin()) return
		let userAuth = getStorage('userAuth') || {}
		showLoading()
		try {
			const res = await api.addShoppingCart({
				"userId": userAuth.id,
				"spuId": selSizeData.value.id,
				"goodsId": goodsDetail.value.id,
				"goodsName": goodsDetail.value.name,
				"placeMerchant": goodsDetail.value.placeMerchant,
				"quantity": 1,
				"spuName": selSizeData.value.name,
				"addPrice": selSizeData.value.price,
				"storeId": goodsDetail.value.storeId,
				"picUrl": goodsDetail.value.picture && goodsDetail.value.picture[0].url
			})
			showToast('添加成功')
			commonStore.commit('addReload', 'carIndex')
			showSizePanel.value = false
		} finally {
			hideLoading()
		}
	}
	const clickPay = () => {
		if (!utilLogin()) return
		let userAuth = getStorage('userAuth') || {}
		// 把选择的商品放入store
		const data = [{
			"userId": userAuth.id,
			"spuId": selSizeData.value.id,
			"goodsId": goodsDetail.value.id,
			"goodsName": goodsDetail.value.name,
			"placeMerchant": goodsDetail.value.placeMerchant,
			"quantity": payNum.value,
			number: payNum.value,
			"spuName": selSizeData.value.name,
			"addPrice": selSizeData.value.price,
			"storeId": goodsDetail.value.storeId,
			"picUrl": goodsDetail.value.picture && goodsDetail.value.picture[0].url,
			shareUserId:shareUserId.value
		}]
		if (data.length === 0) {
			showToast('请至少选择一个商品')
			return
		}
		commonStore.commit('setPayGoodsData', data)
		jump('/pages/category/goodsPay')
	}
	const payNum = ref(1)
	const clickMinus = () => {
		if (payNum.value === 1) return
		payNum.value = payNum.value - 1
	}
	const clickAdd = () => {
		if (payNum.value === Number(selSizeData.value.inventory)) return
		payNum.value = payNum.value + 1
	}
	const getPrice = (arr) => {
		let max = 0
		let min = 0
		arr.forEach((item) => {
			if (item.price > max) max = item.price
			if (item.price < min || min === 0) min = item.price
		})
		if (min === max) return toYuan(min)
		return toYuan(min) + '-' + toYuan(max)
	}
	const getKeyword=(str:string)=>{
		if(!str) return []
		return str.split(/[,，]/).filter(item => item.trim() !== '');
	}
</script>

<style lang="scss">
	.goodsDetail-container {
		padding-bottom: 140rpx;

		.swiper-parent {
			margin-top: 20rpx;
		}

		.swiper {
			height: 375rpx;

		}

		.swiper-item {
			height: 100%;
			text-align: center;
		}

		.banner-img {
			height: 100%;
			border-radius: 8rpx;
		}

		.goods-price {
			position: relative;
			z-index: 3;
			background: linear-gradient(90deg, #FF7500 0%, #FF4B00 100%);
			color: #fff;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;

			.new-price {
				font-size: 42rpx;
				font-weight: bold;
			}

			.old-price {
				font-size: 28rpx;
				margin-left: 20rpx;
				text-decoration: line-through;
			}
		}

		.goods-name {
			color: #333;
			font-size: 28rpx;
			padding: 20rpx;
			font-weight: bold;
		}
		.goods-keyword{
			padding: 0 20rpx;
		}
		.goods-key-list{
			font-size: 24rpx;
			color: #A9875D;
			display: inline-block;
			padding: 4rpx 20rpx;
			background-color: #FDF6EE;
			margin-right: 20rpx;
			border-radius: 8rpx;
		}
		.goods-name-box{
			position: relative;
			z-index: 2;
			box-shadow: 0 0 10rpx 5rpx rgba(0,0,0,0.2);
			background-color: #fff;
		}
		.goods-blurb{
			font-size: 24rpx;
			padding: 20rpx 20rpx;
			color: #666;
			display: flex;
			flex-wrap: wrap;
		}

		.goods-info {
			padding: 20rpx;
		}

		.goods-img {
			width: 100%;
			border-radius: 10rpx;
		}

		.page-bottom {
			position: fixed;
			width: 100%;
			left: 0;
			bottom: 0;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.ico-act {
				text-align: center;
				padding: 0 20rpx;
				font-size: 26rpx;
				position: relative;
				color: #555;

				.iconfont {
					font-size: 38rpx;
				}
			}

			.share-btn-child {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}

			.yuan-btn {
				height: 70rpx;
				width: 160rpx;
				border-radius: 8rpx;
				margin-left: 20rpx;
				font-size: 28rpx;
			}
		}



		.other-panel {
			position: fixed;
			z-index: 99;
			background-color: rgba(0, 0, 0, 0.3);
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			transform: translateY(100%);
		}

		.other-panel-show {
			transform: translateY(0);
		}

		.other-main {
			background-color: #fff;
			border-radius: 15rpx 15rpx 0 0;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 0 20rpx 50rpx 20rpx;
			transform: translateY(100%);
			transition: all 0.3s;
		}

		.other-main-show {
			transform: translateY(0);
		}

		.other-title {
			color: #333;
			font-size: 32rpx;
			text-align: center;
			position: relative;
			line-height: 80rpx;
			font-weight: bold;

			.iconfont {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 32rpx;
				padding: 5rpx;
				font-weight: lighter;
			}
		}

		.other-list {
			.list-title {
				font-size: 28rpx;
				color: #333;
				font-weight: bold;
			}

			.list-content {
				display: flex;
				align-items: center;
				padding: 20rpx 0;
			}

			.size-list {
				border: solid 1px #eee;
				border-radius: 8rpx;
				padding: 10rpx 20rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
			}

			.size-list-sel {
				border-color: #FF4F00;
				color: #FF4F00;
			}
		}

		.size-goods {
			display: flex;
			align-items: center;
			font-size: 36rpx;
			color: #FF4F00;
			font-weight: bold;
			margin-bottom: 50rpx;

			.size-img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}
		}

		.other-bottom {
			display: flex;
			align-items: center;
			margin-top: 100rpx;
			justify-content: center;

			.sure-btn {
				width: 200rpx;
				height: 70rpx;
				border-radius: 70rpx;
			}
		}

		.goods-numbox {
			display: flex;
			align-items: center;

			.iconfont {
				font-size: 28rpx;
				color: #333;
				padding: 10rpx;
			}
		}

		.goods-num {
			width: 100rpx;
			border: solid 1px #eee;
			border-radius: 4rpx;
			padding: 5rpx 10rpx;
			text-align: center;
			margin: 0 10rpx;
			font-size: 28rpx;
		}
	}
</style>